<template>
    <div :id="id" class="svg-box"></div>
</template>

<script>
import Chart from '../chart.js'
import * as d3 from 'd3'
import { defineComponent } from 'vue'
export default defineComponent({
    props: {
        id: {
            required: true,
        },
        data: {
            required: true,
        },
    },
    data() {
        return {
            oldIndex: null,
        }
    },
    mounted() {
        setTimeout(() => {
            this.initMap(this.data)
        }, 100)
    },
    methods: {
        initMap(data) {
            /* ----------------------------配置参数------------------------  */
            const chart = new Chart()
            const box = d3.select('#' + this.id)
            const { offsetWidth, offsetHeight } = box.node()
            box.node().innerHTML = ''
            const config = {
                margins: { top: 2, left: 0, bottom: 0, right: 2 },
                textColor: '#296FFF',
                textColorBlack: '#ffffff',
                hoverColor: '#296FFF',
                doughnutColor: '#296FFF',
                title: '闭环管控',
                innerRadius: 30,
                outerRadius: 55,
                textOffsetH: 0,
                lineColor: 'black',
                animateDuration: 1000,
            }

            chart.box(box)
            chart.margins(config.margins)

            chart.setId(this.id)
            chart.width(offsetWidth)
            chart.height(offsetHeight)

            /* ----------------------------尺度转换------------------------  */
            chart.arcAngle = d3
                .pie()
                .padAngle(0.05)
                .sort((a, b) => a.value - b.value)
                .value(d => d.value)

            /* ----------------------------渲染扇形------------------------  */
            chart.renderSlices = function () {
                const slices = chart
                    .body()
                    .append('g')
                    .classed('pie', true)
                    .attr('transform', 'translate(' + chart.getBodyWidth() / 2 + ',' + chart.getBodyHeight() / 2 + ')')
                    .selectAll('.arc')
                    .data(chart.arcAngle(data))

                slices
                    .enter()
                    .append('path')
                    .attr('class', (d, i) => 'arc arc-' + i)
                    .merge(slices)
                    .attr('stroke', 'none')
                    .attr('fill', config.doughnutColor)
                    .attr('fill', d => {
                        return d.data.color
                    })
                    .attr('opacity', 0.7)
                    .transition()
                    .duration(config.animateDuration)
                    .attrTween('d', arcTween)

                slices.exit().remove()

                const arc = d3.arc().outerRadius(config.outerRadius).innerRadius(config.innerRadius)

                function arcTween(d) {
                    let currentArc = this._current
                    if (!currentArc) {
                        currentArc = { startAngle: 0, endAngle: 0 }
                    }
                    const interpolate = d3.interpolate(currentArc, d)
                    this._current = interpolate(1) // 当饼图更新时，从当前角度过渡到新角度

                    return function (t) {
                        return arc(interpolate(t))
                    }
                }
            }
            /* ----------------------------渲染图标题------------------------  */
            chart.renderTitle = function () {
                chart
                    .svg()
                    .append('text')
                    .attr('x', chart.width() / 2)
                    .attr('y', chart.height() / 2)
                    .attr('dy', 8)
                    .classed('f18 fb', true)
                    .text(data[1].value + data[0].value)
                    .attr('fill', config.textColorBlack)
                    .attr('text-anchor', 'middle')
                    .attr('stroke', 'none')
            }

            /* ----------------------------绑定鼠标交互事件------------------------  */

            chart.render = function () {
                chart.renderTitle()

                chart.renderSlices()
            }

            chart.renderChart()
        },
    },
})
</script>

<style lang="scss" scoped>
.svg-box {
    height: 120px;
    width: 120px;
}
</style>
